<template>
	<view class="mainCon">
		<view class="orderList">
			<view style="margin-bottom: 15px;">注：显示当前登录手机号的前20条数据</view>
			<view class="orderItem" v-for="(item,index) in orderList">
				<view class="orderInfo">
					<view class="infoCell">
						<view class="labelName">
							车号 : 
						</view>
						<view class="infoCon">
							{{ item.carcode }}
						</view>
					</view>
					<view class="infoCell">
						<view class="labelName">
							净重 : 
						</view>
						<view class="infoCon">
							{{ item.realweight }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							毛重 : 
						</view>
						<view class="infoCon">
							{{ item.gross }}
						</view>
					</view> 
					<view class="infoCell">
						<view class="labelName">
							称重时间 : 
						</view>
						<view class="infoCon">
							{{ item.createtime }}
							<!-- {{ item.createtime }} -->
						</view>
					</view> 
					
					<view style="display: flex; justify-content: center;margin-top: 20px;">
						<view class="btn" @click="carInfoClick(item)">查看详细</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 200rpx;" v-if="orderList.length ===0">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		
		<u-popup v-model="show" width="100%" height="100%" :closeable="true">
			<view style="margin: 15px;">
				<view style="text-align: center;font-size: 20px;
						font-weight: 700;">
					江苏省道路货运运单
				</view>
				<view class="content">
					<view class="font">运单编号：{{ carItem.ydbh == null || carItem.ydbh == undefined ? ' ' : carItem.ydbh }}</view>
					
					<view class="font">货物装载源头单位：{{ carItem.zhdw == null || carItem.zhdw == undefined ? ' ' : carItem.zhdw }}</view>
					
					<view class="font">货物装载源头单位联系电话：{{ carItem.sourcetel == null  || carItem.sourcetel == undefined ? ' ': carItem.sourcetel }}</view>
					<view class="font">道路运输经营者名称：{{ carItem.transportoperator == null || carItem.transportoperator == undefined ? ' ' : carItem.transportoperator }}</view>
					
					<view class="font">车辆号牌：{{ carItem.carcode == null || carItem.carcode == undefined ? ' ' : carItem.carcode }}</view>
					
					<view class="font">车辆道路运输证号：{{ carItem.transportnumber == null || carItem.transportnumber == undefined ? ' ' : carItem.transportnumber }}</view>
					
					<view class="font">挂车号牌：</view>
					
					<view class="font">挂车道路运输证号：{{ carItem.trailernumber == null || carItem.trailernumber == undefined ? ' ' : carItem.trailernumber }}</view>
					<view class="font">轴型：{{ carItem.axialtype == null || carItem.axialtype == undefined ? ' ' : carItem.axialtype }}轴；
					&nbsp;车货总质量限值：{{ carItem.totalmass == null || carItem.totalmass == undefined ? ' ' : carItem.totalmass }}吨</view>
					
					<view class="font">出场时间：{{ carItem.createtime == null || carItem.createtime == undefined ? ' ' : carItem.createtime }}</view>
					
					<view class="font">驾驶人姓名：{{ carItem.driver == null || carItem.driver == undefined ? ' ': carItem.driver }}</view>
					
					<view class="font">驾驶人从业资格证号：{{ carItem.certificatenumber == null || carItem.certificatenumber == undefined ? ' ': carItem.certificatenumber }}</view>
					
					<view class="font">货物品种：{{ carItem.cargo == null || carItem.cargo == undefined ? ' ' : carItem.cargo }}</view>
					
					<view class="font">车货总重：{{ carItem.gross == null || carItem.gross == undefined ? ' ' : carItem.gross }}</view>
					
					<view class="font">起运地：{{ carItem.setoutport == null || carItem.setoutport == undefined ? ' ' : carItem.setoutport }}</view>
					<view class="font">托运单位：{{ carItem.delivery == null || carItem.delivery == undefined ? ' ': carItem.delivery }}</view>
					<view class="font">送达地：{{ carItem.goalport == null || carItem.goalport == undefined ? ' ' : carItem.goalport }}</view>
					<view class="font">收货单位：{{ carItem.consignee == null || carItem.consignee == undefined ? ' ' : carItem.consignee }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		data(){
			return {
				tel: '',
				orderList: [],
				carItem: {},
				show: false
			}
		},
		onLoad() {
			// uni.getStorageSync("userInfo").mobile 15855037794
			this.tel = uni.getStorageSync("userInfo").mobile
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					// url: 'https://api.zlkj-port.com/cygjapi/zlzg/Q/iVsZT3Jo707RhEi',
					url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/iVsZT3Jo707RhEi?contactsway=' + this.tel,
					method: "get",
					success: (res) => {
						uni.hideLoading()
						this.orderList = res.data.rows
						this.orderList.map(item => {
							item.createtime = moment(item.createtime).format('YYYY-MM-DD hh:mm')
							return item
						})
					}
				})
			},
			carInfoClick(item) {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: 'https://api.zlkj-port.com/cyapi/zlzg/Q/gs88pgw6BLxgPp1?id=' + item.id,
					method: 'get',
					success: (res) => {
						uni.hideLoading()
						res.data.rows = res.data.rows.map(item => {
							item.createtime = moment(item.createtime).format('YYYY-MM-DD hh:mm')
							return item
						})
						this.carItem = res.data.rows[0]
					}
				})
				this.show = true
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F1F9;
	}
	.font {
		margin: 10px 0;
		font-size: 18px;
	}
	.content {
		margin-top: 30px;
	}
	.btn {
		width: 200rpx;
		line-height: 60rpx;
		border-radius: 25rpx;
		text-align: center;
		border: 1rpx solid #1A75FF;
		color: #1A75FF;
		font-size: 26rpx;
	}

	.mainCon {
		.tabHead {
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding: 20rpx;
			position: fixed;
			top: 0;
			width: 100%;
			// background-color: #FFFFFF;

			.tabItem {
				width: 160rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				text-align: center;
				border: 1rpx solid #1A75FF;
				color: #868887;
				font-size: 26rpx;
			}

			.active {
				background-color: #1A75FF;
				color: #FFFFFF;
			}
		}

		.orderList {
			width: 700rpx;
			margin: 20rpx auto;
			// margin-top: 100rpx;
			.orderItem {
				background-color: #FFFFFF;
				padding: 20rpx;
				border-radius: 12rpx;
				margin-bottom: 20rpx;

				.orderHead {
					.headcell {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						.leftCon {
							display: flex;
							align-items: center;

							.labelTag {
								background-color: #E0EDFB;
								color: #4C86E7;
								width: 150rpx;
								line-height: 50rpx;
								border-radius: 25rpx;
								font-size: 26rpx;
								text-align: center;
								margin-right: 15rpx;
							}
						}

						.status1 {
							color: #4C86E7;
							font-size: 26rpx;
						}

						.dateLabel {
							color: #858585;
						}

						.status2 {
							color: #E94340;
							font-size: 30rpx;
						}
					}
				}

				.orderInfo {
					margin-top: 20rpx;
					// border-top: 1rpx dashed #C1C3C2;
					padding-top: 20rpx;

					.infoCell {
						padding-left: 50px;
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						.labelTag {
							background-color: #E0EDFB;
							color: #4C86E7;
							width: 150rpx;
							line-height: 50rpx;
							border-radius: 25rpx;
							font-size: 26rpx;
							text-align: center;
							margin-right: 15rpx;
						}

						.labelName {
							color: #87888A;
							font-size: 28rpx;
							margin-right: 50rpx;
							width: 195rpx;
						}

						.infoCon {
							color: #87888A;
						}
					}
				}

				.bottomActions {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.delete {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}

					.confirm {
						width: 300rpx;
						line-height: 60rpx;
						text-align: center;
						border: 1rpx solid #5B92E8;
						color: #5B92E8;
						border-radius: 30rpx;
						margin: 0 30rpx;
					}
				}
			}
		}
	}
</style>
